﻿@{
    ViewBag.Title = "我的管家";
    Layout = "~/Areas/Shop/Views/Shared/_Layout.cshtml";
}

<div id="app">
    <div class="title">
        我的管家
    </div>
    <div class="bulterList">
        <div class="bulterItem" v-for="bulter in bulters">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td width="30%" rowspan="4">
                        <div class="header">
                            <img class="crown" src="~/Statics/Images/shop/bulter/prove.png" />
                            @*<img class="headImg" v-bind:src="bulter.oatImg" />管家头像*@
                            <img class="headImg" src="@ViewBag.url{{bulter.oatImg}}" />
                        </div>
                        <span style="position: relative; top: 0.5em; left: 0.5em; color: #333333">
                            已健康认证
                        </span>
                        <br />
                        <a href="ShowImg?imgName={{bulter.oatHealthImg}}" style="position: relative; top: 0.5em; left: 0.5em; text-decoration: none;
                                color: #6cc9eb">点击查看</a><!--健康证明链接-->
                    </td>
                    <td style="line-height: 45px; padding-left: 16px; display: flex; position: relative;
                            align-items: center;">
                        @*<span class="bulterName">{{bulter.oatName}}</span>*@<!--管家名称-->
                        <span class="bulterName" v-text="bulter.oatName"></span><!--管家名称-->
                        <img class="smallIcon" src="~/Statics/Images/shop/bulter/phone.png" style="width: 2em; margin: 0px 5px;" />
                        @*<span class="bulterPhone" v-text="">{{bulter.oatPhone}}</span>*@<!--联系方式-->
                        <span class="bulterPhone" v-text="bulter.oatPhone"></span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left; padding-left: 1.3em; color: #999999">
                        <span>工号：</span>
                        <span class="bulterrNo" v-text="bulter.oatNo"></span> <!--工号-->
                        <span>| 总服务次数：</span><span class="bulterrNo" v-text="bulter.oatDesc">
                            <!--总服务次数-->
                        </span><span>次</span>
                    </td>
                </tr>
                <tr>
                    <td style="line-height: 45px; padding-left: 16px; display: flex; position: relative;
                            align-items: center;">
                        <img class="smallIcon" src="~/Statics/Images/shop/bulter/id.png" style="width: 1.5em" />
                        <span class="id" style="color: #333333; margin-left: 3px;">身份证:<span v-text="bulter.IDNo"></span></span><!--身份证号-->
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="switch">
        <div class="switchContainer">
            <div class="Comment selected" v-on:tap="showCommentList()">
                历史评价
            </div>
            <div class="Reward" v-on:tap="showRecordList()">
                打赏记录
            </div>
        </div>
    </div>
    <div id="listContent" style="width:100%;height:375px;overflow-x:hidden; overflow-y:scroll; margin-bottom:50px">
        <div id="slider" style="width:200%;position:relative;left:0%">
            <div class="recordList" id="commentList" style="left:0px; top:0px">
                <div class="listItem" v-for="comm in comment">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 14px;">
                        <tr>
                            <td width="25%" align="center">
                                <img class="UserHead" v-bind:src="userHeadImg" style="width: 4.5em;
                                height: 4.5em;" /><!--头像-->
                            </td>
                            <td width="75%">
                                <span class="UserName" v-text="userID"><!--用户昵称--></span><span class="tillNow"><span v-text="comm.CreatedDate"></span><!--时间-->天前</span>
                                <br />
                                <p class="commenContent" v-text="comm.tcRemark">
                                    <!--评价内容-->
                                </p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="recordList" id="rewardList" style="left:50%;top:0px">
                <div class="listItem" v-for="reward in rewards">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 14px;">
                        <tr>
                            <td width="25%" align="center">
                                <img class="UserHead" v-bind:src="userHeadImg" style="width: 4.5em;
                                height: 4.5em;" /><!--头像-->
                            </td>
                            <td width="75%">
                                <span class="UserName" v-text="userID"></span><span class="tillNow"><span v-text="reward.CreatedDate"></span>天前</span>
                                <br />
                                <p class="commenContent">
                                    打赏<span v-text="reward.trTotolRate"></span>金币
                                </p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="gap">
    </div>
    <div class="footer">
        <table border="0" width="85%" cellpadding="0" cellspacing="0" style="margin: 0px auto">
            <tr>
                <td align="center" style="width: 49%">
                    <div class="btnReward" id="btnReward" v-on:tap="giveReward()">
                        打赏
                    </div>
                </td>
                <td align="center" style="width: 49%">
                    <div class="btnComment" v-on:tap="goComment()">
                        评价
                    </div>
                </td>
            </tr>
        </table>
    </div>

    <div class="cover" id="cover" style="display:none">
    </div>
    <div class="popUpDiv" id="note" style="display:none">
        <a id="closePop" v-on:tap="closeReward()">
            <img src="~/Statics/Images/shop/bulter/close.png" style="width: 1em; float: right; margin: 10px;" />
        </a>
        <div style="font-size: 12px; margin-top: 2em; color: #4db447;">
            <span style="float: left; margin-top: 1em; font-size: 12px; margin-left: 5em;">
                1积分=1金币,可用积分
                {{points}} 积分
            </span><img style="width: 1em; margin-top: 1.3em; margin-left: 3px;" src="~/Statics/Images/shop/bulter/tip.png" />
        </div>
        <div class="tipContent">
            <span style="line-height: 30px;">选择打赏金币个数</span>
            <div class="chooseCoins">
                <div class="coin" v-on:tap="setCoin(1)">
                    <img src="~/Statics/Images/shop/bulter/coin_1.png" class="coin1" />
                    <img src="~/Statics/Images/shop/bulter/coin_2.png" style="display: none" class="coin2" />
                </div>
                <div class="coin" v-on:tap="setCoin(2)">
                    <img src="~/Statics/Images/shop/bulter/coin_1.png" style="display: none" class="coin1" />
                    <img src="~/Statics/Images/shop/bulter/coin_2.png" class="coin2" />
                </div>
                <div class="coin" v-on:tap="setCoin(3)">
                    <img src="~/Statics/Images/shop/bulter/coin_1.png" style="display: none" class="coin1" />
                    <img src="~/Statics/Images/shop/bulter/coin_2.png" class="coin2" />
                </div>
                <div class="coin" v-on:tap="setCoin(4)">
                    <img src="~/Statics/Images/shop/bulter/coin_1.png" style="display: none" class="coin1" />
                    <img src="~/Statics/Images/shop/bulter/coin_2.png" class="coin2" />
                </div>
                <div class="coin" v-on:tap="setCoin(5)">
                    <img src="~/Statics/Images/shop/bulter/coin_1.png" style="display: none" class="coin1" />
                    <img src="~/Statics/Images/shop/bulter/coin_2.png" class="coin2" />
                </div>
            </div>
        </div>
        <table border="0" cellpadding="0" cellspacing="0" style="width: 80%; margin: 15px auto;">
            <tr>
                <td>
                    <div style="line-height: 27px;text-align: center; width: 80%; margin: 0px auto; background-color: rgb(108, 201, 235);
                        color: white;border-radius: 5px;" v-on:tap="confirmReward()">
                        <span>确认</span>
                    </div>
                </td>
                <td>
                    <div style="line-height: 27px;text-align: center; width: 80%; margin: 0px auto; background-color: rgb(231, 66, 180);
                        color: white;border-radius: 5px;" v-on:tap="cancel">
                        <span>取消</span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div id="loading" class="ui-loading-block" style="top:40%">
        <div class="ui-loading-wrap">
            <div class="ui-loading-cnt">
                <div class="sk-wave">
                    <div class="sk-rect sk-rect1"></div>
                    <div class="sk-rect sk-rect2"></div>
                    <div class="sk-rect sk-rect3"></div>
                    <div class="sk-rect sk-rect4"></div>
                    <div class="sk-rect sk-rect5"></div>
                </div>
                <i>正在加载中...</i>
            </div>
        </div>
    </div>
</div>


@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script>
        $(function(){
            if(!Date.diffDays){//计算日期差值
                Date.prototype.diffDays=function(date1,date2){
                    return Math.round((date2.getTime()-date1.getTime())/(1000*60*60*24))
                }
            }
            var model = new Vue({
                el: '#app',
                data: {
                    openid:'@ViewBag.openid',
                    userID: '@ViewBag.nickName',
                    userHeadImg:'@ViewBag.ocHeadImage',
                    bulters: @Html.Raw(ViewBag.AuntList),
                    comment: [],//评价
                    rewards: [],//打赏
                    points: '@ViewBag.points',//可用积分
                    coins: 1,//打赏金币
                },
                computed: {
                },
                methods: {
                    showLoading: function () {//显示载入
                        $("#loading").show();
                    },
                    hideLoading: function () {//隐藏载入
                        $("#loading").hide();
                    },
                    showCommentList: function () {//显示评论列表
                        var self=this;
                        $(".Comment").addClass("selected");
                        $(".Reward").removeClass("selected");
                        $("#slider").animate({left:"0%"},function(){
                            $('#commentList').show();
                            $('#rewardList').hide();
                        });
                        $.get("getComment",
                            {
                                openid:'@ViewBag.openid',
                                num:'10'
                            }, function (data) {
                                if(data!=null&&data!="")
                                {
                                    var o=JSON.parse(data);
                                    if(o.length==0){//无数据
                                        $('#commentList').empty();
                                        var img=document.createElement('img');
                                        $(img).attr('src','../../Statics/images/shop/bulter/no_comment.jpg').css('width','100%');
                                        $('#commentList').html($(img));
                                    }
                                    else{
                                        for(var i=0;i<o.length;i++){
                                            var timeCreate=new Date(o[i]["CreatedDate"]);
                                            var now=new Date();
                                            var gap=new Date().diffDays(timeCreate,now);//计算时间差
                                            if(gap<1){
                                                gap="不到1";
                                            }
                                            o[i]["CreatedDate"]=gap;
                                            if(o[i]["tcRemark"].length>30){//截取评论字数
                                                o[i]["tcRemark"]=o[i]["tcRemark"].substr(0,30)+"...";
                                            }
                                        }
                                        self.comment=o;
                                    }
                                }
                                else{
                                    alert("数据异常，请稍候再试");
                                }
                            })
                    },
                    showRecordList: function () {//显示打赏列表
                        var self=this;
                        $(".Reward").addClass("selected");
                        $(".Comment").removeClass("selected");
                        $("#slider").animate({ left: "-100%" },function(){
                            $('#commentList').hide();
                            $('#rewardList').show();
                        });
                        $.get("getRecord",
                            {
                                openid:'@ViewBag.openid',
                                num:'10'
                            }, function (data) {
                                if(data!=""&&data!=null){
                                    var o=JSON.parse(data);
                                    if(o.length==0){
                                        $('#rewardList').empty();
                                        var img=document.createElement('img');
                                        $(img).attr('src','../../Statics/images/shop/bulter/no_record.jpg').css('width','100%');
                                        $('#rewardList').html($(img));
                                    }
                                    else{
                                        for(var i=0;i<o.length;i++){
                                            var timeCreate=new Date(o[i]["CreatedDate"]);
                                            var now=new Date();
                                            var gap=new Date().diffDays(timeCreate,now);//计算时间差
                                            if(gap<1){
                                                gap="不到1";
                                            }
                                            o[i]["CreatedDate"]=gap;
                                            self.rewards=o;
                                        }
                                    }
                                }
                                else
                                {
                                    alert("数据异常，请稍候再试");
                                }

                            })
                    },
                    giveReward: function () {//弹出打赏框
                        $('#cover').show();
                        $('#note').show();
                    },
                    closeReward: function () {//关闭打赏框
                        $('#cover').hide();
                        $('#note').hide();
                    },
                    goComment: function () {//去评价

                        if('@ViewBag.isCanPublish'=="0"){
                            alert("只有确认过预定的用户才能评论哦");
                        }
                        else{
                            this.showLoading();
                            window.location.href = "../../Shop/Message/Index2?openid=@ViewBag.openid&&code=1";
                        }

                    },
                    confirmReward: function () {//确认打赏

                        var self=this;
                        if(self.coins>self.points){
                            alert("很抱歉，您没有足够的积分");
                            if(self.points>=1&&self.points<=5){
                                self.setCoin(self.points);
                            }
                            else{
                                self.setCoin(1);
                            }
                            return;
                        }
                        this.showLoading();
                        $.post('confirmReward', {
                            data:JSON.stringify(model._data)
                        }, function (data) {
                            self.hideLoading();
                            if(data=="OK"){
                                alert("打赏成功！");
                                self.closeReward();
                                window.location.href="../../Shop/Bulter/Index?openid=@ViewBag.openid";
                            }
                            if(data=="Error"){
                                alert("数据异常，请稍候再试！");
                            }
                        })
                    },
                    cancel: function () {//取消
                        this.closeReward();
                    },
                    setCoin: function (i) {//设置打赏金币
                        var self=this;
                        if(i>1&&self.coins==i){
                            self.coins=i-1;
                        }
                        else{
                            self.coins=i;
                        }
                        showCoins(self.coins);
                        function showCoins(i){
                            $('.coin').each(function(index,elt){
                                if(index<=i-1){
                                    $(elt).find('.coin1').show();
                                    $(elt).find('.coin2').hide();
                                }
                                else{
                                    $(elt).find('.coin1').hide();
                                    $(elt).find('.coin2').show();
                                }
                            })
                        }
                    }
                }
            });
            model.showCommentList();
        })

    </script>
}

@section Styles{
    @Styles.Render("~/cssbundles/consumer/address")
}
<link rel="stylesheet" href="~/Statics/css/bulter.css" />